import React from 'react';
import { Breadcrumb, Table } from 'antd';
import { Link } from 'react-router-dom';
import http from '../../http'
import './index.css'
const { Column } = Table;
const Address = (props) => {
    const {list} = props
    return (
        <div className='detail-table'>
            <div>
                <span>收件人 :</span>
                <span>{list.receiverName}</span>
            </div>
            <div>
                <span>联系电话 :</span>
                <span>{list.receiverPhone || list.receiverMobile == null ? '无' : list.receiverPhone || list.receiverMobile}</span>
            </div>
            <div>
                <span>收货地址 :</span>
                <span>{list.receiverProvince}-{list.receiverCity}-{list.receiverAddress}</span>
            </div>
            <div>
                <span>邮政编码 :</span>
                <span>{list.receiverZip}</span>
            </div>
        </div>
    )
}
class OrderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderDetail: {},
            shippingVo: {},
            orderItemVoList: []
        }
    }
    details() { //获取订单信息
        const orderNo = this.props.match.params.id
        http.get('/api/manage/order/detail.do?orderNo=' + orderNo).then(res => {
            this.setState({
                orderDetail: JSON.parse(JSON.stringify(res.data)),
                shippingVo: res.data.shippingVo,
                orderItemVoList: res.data.orderItemVoList
            })
        })
    }
    componentDidMount() {
        this.details()
    }
    render() {
        const { orderDetail, shippingVo, orderItemVoList } = this.state
        return (
            <div>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/main/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>订单</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <Link to="/main/order">订单管理</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>订单详情</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>订单详情</h2>
                </div>
                <div className='shop-con'>
                    <p className='detail-title'>订单基本信息</p>
                    <div className='detail-table detail-border'>
                        <div>
                            <span>订单号 :</span>
                            <span>{orderDetail.orderNo}</span>
                        </div>
                        <div>
                            <span>创建时间 :</span>
                            <span>{orderDetail.createTime}</span>
                        </div>
                        <div>
                            <span>支付状态 :</span>
                            <span>{orderDetail.statusDesc}</span>
                        </div>
                        <div>
                            <span>支付方式 :</span>
                            <span>{orderDetail.paymentTypeDesc}</span>
                        </div>
                        <div>
                            <span>订单金额 :</span>
                            <span>￥{orderDetail.payment}</span>
                        </div>
                    </div>
                    <div style={{ 'marginTop': '30px' }}>
                        <p className='detail-title'>收件人信息</p>
                        <div className='detail-border'>
                            {shippingVo === null ? '' : <Address list={shippingVo} />}
                        </div>
                    </div>
                    <div style={{ 'marginTop': '30px' }}>
                        <p className='detail-title'>商品信息</p>
                        <Table dataSource={orderItemVoList} pagination={false}>
                            <Column
                                title="图片"
                                dataIndex="productImage"
                                key="productImage"
                                render={(text, record) => (
                                    <span>
                                        <img style={{ 'width': '100px', 'height': '100px' }} src={orderDetail.imageHost + text} />
                                    </span>
                                )}
                            />
                            <Column title="名称" dataIndex="productName" key="productName" />
                            <Column title="单价" dataIndex="currentUnitPrice" key="currentUnitPrice" />
                            <Column title="数量" dataIndex="quantity" key="quantity" />
                            <Column title="总价" dataIndex="totalPrice" key="totalPrice" />
                        </Table>
                    </div>
                </div>
            </div>
        );
    }
}

export default OrderDetail;